<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/10
  Time: 9:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="JS/jquery-1.8.3.js"></script>
    <script src="CSS/bootstrap.min.js"></script>
    <link rel="stylesheet" href="CSS/bootstrap.css">

    <style>
        form{
            width: 915px;
            margin: 100px auto;
        }

        .choose {
            background-color: deepskyblue;
            color: white;
            cursor: pointer;
        }

        .group input {
            width: 50%;
            float: left;
        }

        .group button {
            float: left;
        }
        .group{
            overflow: hidden;
        }
        #context{
            width: 457px;
            background-color: #cccccc;
        }
    </style>
</head>
<body>


<form role="form" action="FuzzySerchServlet" method="post">

    <div class="form-group">
        <label for="exampleInput1">请输入主贴标题</label>
        <div class="group">
            <input type="text" class="form-control" id="exampleInput1" name="keyword" placeholder="请输入查询的内容" onkeyup="serchTopic()">
            <button type="submit" class="btn btn-info">搜索</button>
        </div>
        <div id="context"></div>
    </div>

</form>


</body>

<script>
    var xhr; //定义请求变量
    function createXHR() {  //实例化请求对象,针对不同浏览器采用不同初始化方法
        try {
            return new XMLHttpRequest();
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    function serchTopic() {
        var $context = $(".form-control").val();  //获取搜索栏中内容
        if ($context != "") {  //若搜索栏中内容不为空则执行查询
            xhr = createXHR(); //实例化对象
            xhr.onreadystatechange = callback; //配置回调函数
            xhr.open("POST", "SelectTopicByKeywordServlet", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //设置请求头
            xhr.send("serch=" + $context);  //发送查询内容
        }else {
            $("#context").text("");  //如果搜索框为空清除框内历史内容
        }
    }

    function callback() {
        if (xhr.readyState == 4 && xhr.status == 200) { //如果请求状态和网络连接正常则返回查询结果
            var result = xhr.responseText; //获取响应结果
            var resultList = result.split(","); //将结果拆分成数组
            var $suggest = $("#context").html();
            $suggest = "";  //清空历史记录
            for (var i = 0; i < resultList.length - 1; i++) {
                $suggest += "<div onmouseover='slideOn(this)' onmouseout='slideOut(this)' onclick='cleck(this)'>";
                $suggest += "" + resultList[i] + "";
                $suggest += "</div>";
            }
            $("#context").html($suggest); //将内容赋予搜索中
        }
    }

    function slideOn(e) {
        $(e).addClass("choose");
    }

    function slideOut(e) {
        $(e).removeClass("choose");
    }

    function cleck(e) {
        var $text = $(e).text(); //获取选中的内容
        $(".form-control").val($text);  //将选中的内容赋予搜索栏中
        $("#context").text("");  //选择完成后清除内容
    }
</script>

</html>
